<template>
	<div>
		<view class="status_bar"></view>
		<!-- 搜索栏 -->
		<view class="searchBox f-c-a">
			<u-icon @click="$back(1)" size="40" name="arrow-left"></u-icon>
			<view class="f searchItem">
				<u-icon class="search" size="40" name="search"></u-icon>
				<input type="text" v-model="searchCity" placeholder="输入城市名称" />
			</view>
			<text @click="toSearch" class="f35">搜索</text>
		</view>

		<!-- 历史记录 -->
		<view ref="letter" class="" v-show="cityFlag">
			<view class="history">当前历史</view>
			<view class="f i">
				<view @click="toAdd(item)" class="history_item" v-for="item,index in historyCits">{{item}}</view>
			</view>
		</view>

		<!-- 城市展示 -->
		<view v-show="cityFlag" id="letters" v-for="item,index in cityList.cities" class="city" @scroll="onScroll">
			<view class="letter">{{item.letter}}</view>
			<view @click="toAdd(item2.cityName)" v-for="(item2,index2) in item.dataLists" class="item2">
				{{item2.cityName}}</view>
		</view>

		<!-- 搜索结果 -->
		<view v-show="searchResultFlag" class="searchResultBox">
			<view @click="toAdd(item)" v-for="item,index in searchResult" class="searchResultBox_item">{{item}}</view>
		</view>

		<!-- 右侧固定导航栏 -->
		<view class="rightFix" v-show="cityFlag">
			<view v-for="(item,index) in cityList.cities" class="rightFixItem" @click="scrollTo(index,item)">
				{{item.letter}}
			</view>
		</view>
		
		<!-- 字母 -->
		<view class="centerBox f-c-c" v-show="letterCurrentFlag">
			<view class="centerBoxItem f-c-c f40">
				{{letterCurrent}}
			</view>
		</view>
	</div>
</template>

<script>
	import cityList from '@/components/citys.js'
	import PinyinUtils from '@/components/pingyinTool.js'
	export default {
		data() {
			return {
				cityList: cityList,
				scrollIntoId: '',
				searchCity: '',
				searchResult: [],
				cityFlag: true,
				searchResultFlag: false,
				backTime: 0,
				historyCits: [],
				letterCurrent:'',
				letterCurrentFlag:false
			}
		},
		// mounted() {
		// 	window.addEventListener("scroll", this.onScroll)
		// },
		// /* 离开页面，销毁事件 */
		// beforeDestroy() {
		// 	window.removeEventListener("scroll", this.onScroll)
		// },
		created() {
			uni.getStorage({
				key: 'Visit_key',
				success: res => {
					this.historyCits = res.data
				}
			});
		},
		methods: {
			scrollTo(index,item) {
				this.letterCurrentFlag=true
				console.log(item);
				this.letterCurrent=item.letter
				setTimeout(()=>{
					this.letterCurrentFlag=false
				},1000)
				
				var letters = document.querySelectorAll('#letters');
				window.scroll(0,letters[index].offsetTop)
			},
			onScroll(e) {
				// console.log(e);
				// var scrollItems = document.querySelectorAll('#letters');
				// for (let i = scrollItems.length - 1; i >= 0; i--) {
				// 	// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
				// 	let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
				// 	if (judge) {
				// 		this.activeIndex = (i + 1).toString();
				// 		this.xzcd = (i + 1).toString();
				// 		break
				// 	}
				// }
			},
			toSearch() {
				if (this.searchCity.trim() == "") {
					this.$u.toast("请输入内容！")
					return
				}
				
				const name = PinyinUtils.chineseToPinYin(this.searchCity).toLowerCase()
				const firstLetter = PinyinUtils.chineseToPinYinFirst(this.searchCity)
				const f = firstLetter.substr(0, 1)
				const i = this.cityList.cities.filter(item => item.letter == f)
				let cityNames = []
				i[0].dataLists.forEach(item => cityNames.push(item.cityName))
				this.searchResult = cityNames.filter(item => new RegExp('^' + this.searchCity).test(item))
				this.searchResult.length === 0 ? this.$u.toast("无结果") : this.searchResultFlag = true;
				this.cityFlag = false;
				this.backTime = 1
			},
			toAdd(item) {
				this.historyCits.unshift(item)
				/* Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次 */
				this.historyCits = Array.from(new Set(this.historyCits))
				this.cityFlag = true
				this.searchResultFlag = false
				console.log(this.historyCits);
				if (this.historyCits.length > 4) {
					this.historyCits = this.historyCits.slice(0, 4)
				}
				/* 存储历史记录 */
				uni.setStorage({
					key: 'Visit_key',
					data: this.historyCits
				});
				uni.$emit('currentCity',item)
				this.$back(1)
			},
		}
	}
</script>

<style scoped>
	.i {
		margin: 0 60rpx 0 20rpx;
	}

	.city {
		font-size: 30rpx;
	}

	.letter {
		background-color: #f4f4f4;
		padding: 5rpx 30rpx;
	}

	.item2 {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.rightFix {
		position: fixed;
		top: 200rpx;
		right: 10rpx;
		font-size: 30rpx;
		color: #808080;
	}

	.rightFixItem {
		margin: 5rpx 0;
	}

	.calendar-list,
		{
		position: relative;
		top: 10upx;
	}

	.history {
		background-color: #f4f4f4;
		padding: 20rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.searchItem {
		background-color: #ebebeb;
		margin: 20rpx 20rpx;
		padding: 13rpx 30rpx;
		border-radius: 10rpx;

	}

	.search {
		margin-right: 20rpx;
	}

	.searchResultBox_item {
		margin: 0 80rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.history_item {
		margin: 10rpx;
		/* width: fit-content; */
		padding: 10rpx 20rpx;
		border: 1rpx solid #f1f1f1;
		white-space: nowrap;
	}
	
	.centerBoxItem{
		background-color: #434343;
		position: fixed;
		top: 600rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #FFFFFF;
	}
</style>
